<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.play{
				position: relative;
			}
			.play_bar__icon {
			    display: block;
			    width: 46px;
			    height: 46px;
			    fill: #31c27c;
			}
			/*#js_icon_status{
				stroke: #31c27c;
			}*/
			.progress {
			    position: absolute;
			    top: 0;
			    left: 0;
			    z-index: 2;
			    width: 46px;
			    height: 46px;
			    -webkit-transform: rotate(-90deg);
			}
			.progress__circle {
			    fill: none;
			    stroke: #31c27c;
			    stroke-width: 2;
			    /*stroke-dasharray: 0 113;*/
			}
		</style>
	</head>

	<body>
		<svg style="display:none" xmlns="http://www.w3.org/2000/svg">
			<defs>
				<symbol id="icon_praise" viewBox="0 0 32 32">
					<title>赞</title>
					<path d="M5.553 29.5c-1.408 0-2.553-1.143-2.553-2.547v-12.735c0-1.407 1.145-2.547 2.553-2.547h3.935c0.065-0.033 0.139-0.072 0.222-0.118 0.371-0.207 0.744-0.466 1.089-0.775 0.564-0.506 0.995-1.095 1.25-1.771 0.155-0.411 0.965-2.535 1.143-3.014 0.318-0.855 0.494-1.379 0.565-1.689 0.108-0.468 0.369-0.924 0.904-1.341 0.506-0.394 1.047-0.51 1.521-0.445 3.547 0.070 5.273 4.258 4.158 7.857l-0.331 1.333 5.252 0c2.405-0.063 4.186 2.039 3.637 5.169l-1.862 8.755c-0.211 1.867-2.221 3.869-4.379 3.869h-17.107zM10.5 13.351v14.149h12.142c1.093 0 2.3-1.209 2.38-2.088 0.004-0.041 0.010-0.081 0.018-0.121l1.887-8.803c0.325-1.841-0.479-2.784-1.626-2.754h-6.656c-0.67 0-1.162-0.624-1.001-1.269l0.677-2.695c0.795-2.51-0.354-5.259-2.318-5.259-0.052 0-0.104-0.004-0.177 0.014-0.137 0.106-0.164 0.153-0.174 0.194-0.099 0.426-0.296 1.007-0.648 1.947-0.184 0.49-1.005 2.628-1.159 3.033-0.383 1.008-1.014 1.863-1.816 2.577-0.47 0.418-0.971 0.763-1.472 1.041-0.019 0.011-0.038 0.021-0.057 0.031zM8.5 27.5v-14h-2.997c-0.277 0-0.503 0.233-0.503 0.519v12.962c0 0.284 0.227 0.519 0.503 0.519h2.997z"></path>
				</symbol>
				<symbol id="icon_like" viewBox="0 0 32 32">
					<title>收藏</title>
					<path d="M16 28c0 0 2.11-1.591 2.259-1.704 2.168-1.707 3.155-2.51 4.483-3.692 2.147-1.911 3.825-3.7 4.974-5.417 0.822-1.229 1.357-2.402 1.565-3.528 0.941-5.091-1.221-8.588-5.151-9.44-2.959-0.641-6.218 0.432-8.131 2.659-1.975-2.525-5.247-3.477-8.295-2.5-3.688 1.182-5.83 4.758-5.040 9.323 0.245 1.418 1.093 2.956 2.449 4.636 1.061 1.314 2.415 2.69 4.029 4.142 1.441 1.296 2.502 2.165 4.774 3.968l2.085 1.554zM10.486 21.014c-1.541-1.384-2.825-2.687-3.811-3.906-1.164-1.44-1.863-2.706-2.040-3.729-0.624-3.599 0.95-6.222 3.685-7.098 2.629-0.842 5.444 0.239 6.747 2.866l0.66 1.331c0.123 0.248 0.327 0.246 0.452 0.003l0.678-1.323c1.177-2.295 4.186-3.559 6.84-2.985 2.842 0.615 4.363 3.073 3.61 7.141-0.154 0.83-0.581 1.766-1.265 2.788-1.038 1.55-2.611 3.224-4.642 5.030-1.289 1.145-2.254 1.929-4.377 3.599-0.119 0.090-0.852 0.651-1.024 0.769-0.025-0.020-0.783-0.597-0.931-0.68-2.173-1.723-3.202-2.567-4.582-3.806z"></path>
				</symbol>
				<symbol id="icon_liked" viewBox="0 0 32 32">
					<title>已收藏</title>
					<path d="M16 28c0 0 2.11-1.591 2.259-1.704 2.168-1.707 3.155-2.51 4.483-3.692 2.147-1.911 3.825-3.7 4.974-5.417 0.822-1.229 1.357-2.402 1.565-3.528 0.941-5.091-1.221-8.588-5.151-9.44-2.959-0.641-6.218 0.432-8.131 2.659-1.975-2.525-5.247-3.477-8.295-2.5-3.688 1.182-5.83 4.758-5.040 9.323 0.245 1.418 1.093 2.956 2.449 4.636 1.061 1.314 2.415 2.69 4.029 4.142 1.441 1.296 2.502 2.165 4.774 3.968l2.085 1.554z"></path>
				</symbol>
				<symbol id="icon_play_thin" viewBox="0 0 32 32">
					<title>播放</title>
					<path d="M16 29c7.177 0 13-5.818 13-13s-5.823-13-13-13c-7.177 0-13 5.818-13 13s5.823 13 13 13zM16 30c-7.732 0-14-6.268-14-14s6.268-14 14-14c7.732 0 14 6.268 14 14s-6.268 14-14 14zM12.5 20.186c0 0.189 0.054 0.374 0.155 0.534 0.295 0.467 0.913 0.606 1.379 0.311v0l6.627-4.186c0.126-0.079 0.232-0.186 0.311-0.311 0.295-0.467 0.155-1.085-0.311-1.379v0l-6.627-4.186c-0.16-0.101-0.345-0.155-0.534-0.155-0.552 0-1 0.448-1 1v8.371z"></path>
				</symbol>
				<symbol id="icon_pause_thin" viewBox="0 0 32 32">
					<title>暂停</title>
					<path d="M16 29c7.177 0 13-5.818 13-13s-5.823-13-13-13c-7.177 0-13 5.818-13 13s5.823 13 13 13zM16 30c-7.732 0-14-6.268-14-14s6.268-14 14-14c7.732 0 14 6.268 14 14s-6.268 14-14 14zM11 11.995v8.009c0 0.546 0.449 0.995 1.003 0.995h1.494c0.56 0 1.003-0.446 1.003-0.995v-8.009c0-0.546-0.449-0.995-1.003-0.995h-1.494c-0.56 0-1.003 0.446-1.003 0.995zM17.5 11.995v8.009c0 0.546 0.449 0.995 1.003 0.995h1.494c0.56 0 1.003-0.446 1.003-0.995v-8.009c0-0.546-0.449-0.995-1.003-0.995h-1.494c-0.56 0-1.003 0.446-1.003 0.995z"></path>
				</symbol>
				<symbol id="icon_download" viewBox="0 0 32 32">
					<title>下载</title>
					<path d="M15 18.978l-9.057-9.057-1.443 1.443 11.545 11.545 11.545-11.545-1.443-1.443-9.146 9.146v-15.567h-2v15.478zM26.5 24.5h2c0 2.241-1.726 4-3.893 4h-17.213c-2.165 0-3.893-1.761-3.893-4h2c0 1.14 0.886 2 1.893 2h17.213c1.010 0 1.893-0.858 1.893-2z"></path>
				</symbol>
			</defs>
		</svg>


		<audio class="ad" src="http://dl.stream.qqmusic.qq.com/C400003OU9ul1LEU9T.m4a?guid=4760305026&amp;vkey=25D43823C63CCC1DDC8452D2B5EAA5842FD6FE11E436FA3CFBD8CC4A1BAB92FC4FFF7D126BA40867EBC40E2923A2EE3A74AA1B58E806E421&amp;uin=0&amp;fromtag=999"></audio>
		<div class="play">
			<svg class="play_bar__icon icon_svg" style="display:">
				<use xlink:href="#icon_play_thin" id="js_icon_status"></use>
			</svg>
			<svg class="progress">
				<circle cx="23" cy="23" r="18" class="progress__circle"/>
			</svg>
		</div>
		
		
		
		
		<script type="text/javascript" src="js/new_file.js"></script>
		<script type="text/javascript">
			var ad = document.querySelector(".ad");
			var cr = document.querySelector(".progress__circle");
			var play1 = document.querySelector(".play");
			var f = false;
//			console.log([cr]);
//			cr.style.strokeDasharray = 100;
//			console.log([js_icon_status]);
//			console.log(js_icon_status.attributes[0]);
			
//			console.log(jsonp.lyric);
			var str = jsonp.lyric;
			var reg = new RegExp("\&#10;");
			var ly = str.split(reg);
//			console.log(ly[7]);
			for(var i=0;i<ly.length;i++){
				console.log(ly[i],ly[i].length);
			}
			
//			console.log([ad]);
			
			play1.addEventListener("click",function(){
				if(!f){
					js_icon_status.setAttribute("xlink:href","#icon_pause_thin");
					ad.play();
					f = true;
				}else{
					js_icon_status.setAttribute("xlink:href","#icon_play_thin");
					ad.pause();
					f=false;
				}
			});

			ad.addEventListener("timeupdate",function(){
//				console.log(Math.floor(ad.currentTime));
				cr.setAttribute('stroke-dasharray',ad.currentTime + " 113");
			})
			
		</script>
	</body>

</html>